import {PageContainer} from '@ant-design/pro-components';
import {List, message} from 'antd';
import React, {useEffect, useState} from 'react';
import {listInterfaceInfoByPageUsingGET} from "@/services/api-frontend/interfaceInfoController";

/**
 * 主页
 * @constructor
 */
const Index: React.FC = () => {
  const [initLoading, setInitLoading] = useState(true);
  const [loading, setLoading] = useState(false);
  const [data, setData] = useState<API.InterfaceInfo[]>([]);
  const [list, setList] = useState<API.InterfaceInfo[]>([]);
  const [total, setTotal] = useState<number>(0);

  const loadData = async (current = 1, pageSize = 5) => {
    setLoading(true);
    try {
      const res = await listInterfaceInfoByPageUsingGET({
        current, pageSize
      });

      setList(res?.data?.records ?? []);
      setTotal(res?.data?.total ?? 0);
    } catch (e) {
      message.error('请求数据失败');
    }

    setLoading(false);
  }

  useEffect(() => {
    loadData();
  }, [])

  return (
    <PageContainer title="在线接口开发平台">

      <List
        className="demo-loadmore-list"
        loading={loading}
        itemLayout="horizontal"
        dataSource={list}
        renderItem={(item) => {
          const apiLink = `/interface_info/${item.id}`;

          return (
            <List.Item
              actions={[<a key={item.id} href={apiLink}>查看</a>]}
            >
              <List.Item.Meta
                title={<a href={apiLink}>{item.name}</a>}
                description={item.description}
              />
            </List.Item>
          )
        }}
        pagination={
          {
            // eslint-disable-next-line @typescript-eslint/no-shadow
            showTotal(total: number) {
              return `总数: ${total}条`
            },
            pageSize: 5,
            total,
            onChange(page, pageSize) {
              loadData(page, pageSize)
            }
          }
        }
      />
    </PageContainer>
  );
};

export default Index;
